<template>

    <div style="background-color:#99a9bf;height: 1000px; display: flex; justify-content: center; align-items: center;">
        <div id="app"
            style="width:500px; height: 600px; background-color: white; padding: 30px; border-radius: 10px; box-sizing: border-box;">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="default">
                <!-- 将“我要评价”作为表单标题 -->
                <el-form-item label="" prop="title"  style="margin: auto;" :label-for="'title'">
                    <div class="readonly-label">我要评价</div>
                </el-form-item>

                <el-form-item label="被评价：" prop="teacherName" :label-for="'teacherName'">
                    <el-input v-model="form.teacherName" placeholder="请输入被评价老师" disabled />
                </el-form-item>
                <el-form-item label="学生：" prop="studentName" :label-for="'studentName'">
                    <el-input v-model="form.studentName" placeholder="请输入评价的学生" disabled />
                </el-form-item>

                <el-form-item label="时间：" prop="creatTime" :label-for="'creatTime'">
                    <el-date-picker clearable v-model="form.creatTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择评价时间" disabled />
                </el-form-item>

                <el-form-item label="问题：" prop="issueType" :label-for="'description'">
                    <el-input v-model="form.issueType" placeholder="请输入描述" disabled />
                </el-form-item>
    
                    <el-form-item label="" prop="start">
                        <el-rate v-model="form.start"></el-rate>
                    </el-form-item>
            
                <el-form-item label="描述：" prop="description" :label-for="'description'">
                    <el-input v-model="form.description" placeholder="请输入描述" />
                </el-form-item>
            </el-form>
            <!-- 将提交按钮与表单项对齐，并拉伸至满宽度 -->
            <div slot="footer" class="dialog-footer" style="display: flex; justify-content: space-between;">
                <el-button type="primary" @click="submitForm" style="width: 80%; margin: auto; margin-top: 50px;">提交评价</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getCodeByHelp } from "@/api/employment/studentHelp";
import { addAppraise } from "@/api/employment/appraise";

export default {
    name: "help",
    data() {
        return {
            encryptedIdFormUrl: null,
            form: {
                id: null,
                teacherName: null,
                start: null,
                studentName: null,
                creatTime: null,
                helpTime: null,
                issueType: null,
                description: null
            },
        }
    },
    methods: {

        submitForm(){
            this.form.helpTime = new Date()
            addAppraise(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
            });
        },
    },
    mounted() {
        // 页面一加载就获取地址的code往后端发送请求，获取到Studenthelp的信息赋值给表
        let urlParams = new URLSearchParams(window.location.search);
       this.encryptedIdFormUrl = urlParams.get("code");
        getCodeByHelp(this.encryptedIdFormUrl).then(response => {
            //将获取到的值储存起来
            console.log(response.data);
            this.form = response.data;
        }); 


    },


}
</script>

<style scoped></style>